<template>
  <div class="goods">
    <!-- 顶部 -->
    <van-nav-bar left-arrow @click-left="goback" class="header">
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
    <!-- 轮播图 -->
    <van-swipe @change="onChange()">
      <van-swipe-item v-for="(item,index) in imgs" :key="index">
        <img :src="item">
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/4</div>
      </template>
    </van-swipe>

    <!-- 商品详情 -->
    <div class="goods_detail">
      <!-- 上层 -->
      <p class="goods_price">
        <span>￥{{data.originprice}}</span>
        <span>销量：{{data.sales}}</span>
      </p>
      <p class="goods_introduce">
        <span>{{data.brand}}</span>
        <span>{{data.category}}</span>
        <span>{{data.proname}}</span>
      </p>
    </div>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
      <van-goods-action-icon icon="shop-o" text="收藏" @click="onClickIcon" />
      <van-goods-action-button type="danger" text="加入购物车" @click="onClickButton" />
    </van-goods-action>
    <!-- 地址选择 -->
    <div class="adress">
      <van-field v-model="fieldValue" is-link readonly label="地区" placeholder="请选择所在地区" @click="show = true" />
      <van-popup v-model="show" round position="bottom">
        <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" @close="show = false"
          @finish="onFinish" />
      </van-popup>
    </div>

    <!-- 猜你喜欢 -->
    <div class="guess">
      <ul>
        <li v-for="item in list" :key="item.proid">
          <img :src="item.img1" />
          <p>{{item.proname}}</p>
          <p>￥{{item.originprice}}</p>
        </li>
      </ul>
    </div>

  </div>

</template>

<script>
 
export default {
  data() {
    return {
      current: 0,
      name: 'goods',
      data: {},
      imgs: [],
      list: [],

      show: false,
      fieldValue: '',
      cascaderValue: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: '陕西省',
          value: '330000',
          children: [{ text: '咸阳市', value: '330100' }],
        },
        {
          text: '山西省',
          value: '320000',
          children: [{ text: '运城市', value: '320100' }],
        },
      ]
    }
  },
  methods: {
    
     // 全部选项选择完毕后，会触发 finish 事件
     onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
    },

    onChange(index) {
      this.current = index;
    },
    goback() {
      this.$router.back();
    },
    // 点击高亮
    onClickIcon() {
      this.$toast('已收藏');
      
    },
    onClickButton() {
    let token =localStorage.getItem('token')
    let userid =localStorage.getItem('userid')
      // console.log(token);
      // console.log(userid);
      this.$service({
        method:'post',
        url:'cart/add',
        headers:{
          token:token
        } ,
        data:{
          userid:userid,
          proid:this.$route.query.id,
          num:1
        }
      })
      .then(res=>{
        console.log(res);
        if(res.data.code==200){
        console.log('请求成功了');
        this.$toast('加入购物车成功');
        }
      })
      .catch(err=>{
        console.log('请求失败了');
        console.log('err',err);
      })
       
      
      
    },
  },
  created() {
    let proid = this.$route.query.id;
    // console.log('goods',proid);
    // 不写get 默认就是get
    this.$service.get(
      'pro/detail/' + proid
    )
      .then(res => {
        if (res.data.code == 200) {
          this.data = res.data.data
          this.imgs = this.data.banners[0].split(',')
          // console.log("this.data",this.data);
        }
      })
      .catch(err => {
        console.log('err', err);
      })

    // 推荐产品列表数据
    this.$service(
      'pro/recommendlist'
    )
      .then(res => {
        if (res.data.code == 200) {
          this.list = res.data.data
          // console.log("goods:this.list",this.list);

          // console.log("this.listimgs",this.listimgs);
        }
      })

    // 采用query的方式去接受参数
    // console.log('this.$route.query',this.$route.query);
  }
}
</script scoped>
  
<style scoped>
.goods {
  background-color: #efefef;

}

/* 顶部 */
#app>div>div.header.van-nav-bar.van-hairline--bottom>div {
  position: s;
}


/* 轮播图 */
.van-swipe {
  height: 23.4375rem;
  position: relative;
  border: 0;
  top: -1.625rem
}

.van-swipe-item img {
  display: block;
  width: 100%;
  height: 100%;

}

.custom-indicator {
  position: absolute;
  bottom: 3.5rem;
  right: 0;
  z-index: 1;
  width: 60px;
  height: 24px;
  background-color: #0003;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom-left-radius: 12px;
  border-top-left-radius: 12px;
}



/* 商品详情 */
.goods_detail {
  height: 6.125rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #fff;
  border-radius: 0 0 .625rem .625rem;
}

.goods_price {
  display: flex;
  justify-content: space-between;
}

.goods_price span:nth-child(1) {
  font-size: 1.5rem;
  color: #f66;
}

.goods_introduce span:nth-child(1) {
  background-color: #ee0a24;
  margin-right: 5px;
}

.goods_introduce span:nth-child(2) {
  background-color: #1989fa;
  margin-right: 5px;
}

/* 地址 */
.adress {
  height: 3.125rem;
  margin: .625rem 0;
  text-align: center;
  line-height: 3.125rem;
  background-color: #fff;
}

/* 猜你喜欢 */
.guess {
  padding: 0 .625rem;
}

.guess ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.guess ul li {
  width: 48%;
  display: flex;
  flex-direction: column;
}

.guess ul li img {
  width: 100%;
}

.guess ul li p:nth-child(3) {
  font-size: 1.25rem;
  color: #f66;
}

.guess ul li p:nth-child(2) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>